<template>
  <div class="top" id="topEcharts"></div>
</template>

<script>
export default {
  name: 'topEcharts',
  mounted() {
    this.topEcharts();
  },
  methods: {
    topEcharts() {
      let leftChart = this.$echarts.init(document.getElementById('topEcharts'));
      leftChart.setOption({
        // title: {
        //   text: '素质能力',
        //   left: 'center',
        //   top: 'bottom',
        //   textStyle: {
        //     fontSize: 14
        //   }
        // },
        xAxis: {
          type: 'category',
          // data: ['6/1 周一', '6/2 周二', '6/3 周三', '6/4 周四', '6/5 周五', '6/6 周六', '6/7 周日'],
          data: [10, 20, 30, 40, 50, 60, 70],
          axisLabel: {
            rotate: 0
          },
          name: '时间'
        },
        yAxis: {
          type: 'value',
          max: 100,
          name: '任务完成数'
        },
        series: [
          {
            data: [80, 50, 62, 79, 44, 50, 62],
            type: 'bar',
            // showBackground: true,
            backgroundStyle: {
              color: '#EBF9FC'
            },
            barWidth: 30,
            markPoint: { // 标注
              // symbol: 'rect',
              symbol: 'image://',
              symbolKeepAspect: true,
              symbolOffset: [0, 0], // 标注偏移设置
              symbolSize: [85, 50], // 标注大小
              itemStyle: {
                color: '#fff',
                borderColor: '#f00',
                borderWidth: 1,
                borderCap: 'round',
                shadowBlur: {
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                  shadowBlur: 10
                },
                shadowColor: 'rgba(255, 0, 0, 0.3)',
                shadowOffsetX: 1,
                shadowOffsetY: 1
              },
              label: { // 标注的文本
                color: '#59D088', // 文本颜色
                fontSize: '12px',
                lineHeight: 10,
                // distance: 'top',
                position: [5, 7] // 文本位置
              },
              data: [ // 标注内容及位置
                { value: `我的等级：${45}`, coord: [4, 60] }
              ]
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = ['#59D088', '#59D088', '#59D088', '#59D088', '#59D088', '#59D088', '#59D088'];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#39C3E2'
            }
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.top {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
</style>
